<!--header 开始-->
<div id="zcbl-header">
    <div class="header-box">
        <h1 class="header-log">
            <a href="index.html" target="_blank">
                <span class="zcbl-logo"></span>
            </a>
        </h1>
        <ul class="header-nav">
            <li class="header-nav-hover"><a href="index.html" target="_blank">首页</a></li>
            <!--<li><a href="" target="_blank">众创</a></li>-->
            <li><a href="" target="_blank">需求</a></li>
            <li><a href="" target="_blank">服务</a></li>
            <!--<li><a href="" target="_blank">资讯</a></li>-->
        </ul>
        <div class="header-right">
            <!--登录后-->
            <div class="user-login">
                <div class="header-user">
                    <a href="./personal-artwork-pic.html" target="_blank">
                        <img src="static/images/pc/public/default-avatar.jpg" alt="用户头像" height="30" width="30">
                    </a>
                    <div class="zcbl-userInfo">
                        <b class="zcbl-userInfo-top"></b>
                        <ul class="zcbl-userInfo-1">
                            <li><a href="#" target="_blank">个人主页</a></li>
                            <!--<li><a href="#" target="_blank">我的作品</a></li>-->
                            <li><a href="#" target="_blank">我的需求</a></li>
                        </ul>
                        <div class="zcbl-userInfo-line"></div>
                        <ul class="zcbl-userInfo-2">
                            <li><a href="javascript:;" data-toggle="modal" data-target="#personalLetter" target="_blank">消息&nbsp;<span>(1)</span></a></li>
                        </ul>
                        <!--<div class="zcbl-userInfo-line"></div>-->
                        <!--<ul class="zcbl-userInfo-1">-->
                        <!--<li class="zcbl-userInfo-WB"><a href="#" target="_blank"><b></b>新浪微博</a></li>-->
                        <!--<li class="zcbl-userInfo-WX"><a href="#" target="_blank"><b></b>微信</a></li>-->
                        <!--<li class="zcbl-userInfo-QQ"><a href="#" target="_blank"><b></b>腾讯空间</a></li>-->
                        <!--</ul>-->
                        <div class="zcbl-userInfo-line"></div>
                        <ul class="zcbl-userInfo-1">
                            <li><a href="#" target="_blank">账号设置</a></li>
                            <li><a href="#" target="_blank">退出</a></li>
                        </ul>
                    </div>
                </div>
                <div class="header-msg">
                    <a href="#">&nbsp;</a>
                    <span class="header-havemsg"></span>
                </div>
                <div class="header-publish"><a href="javascript:;" data-toggle="modal" data-target="#zcblPublish" target="_blank">我要发布</a></div>
            </div>

            <!--登录前-->
            <div class="user-notlogin hide">
                <ul>
                    <li class="pr15 appDownLoad">
                        <a href="" target="_blank" class="app-color">App下载</a>
                        <div class="appDownLoadBox">
                            <b class="appDownLoadBox-top"></b>
                            <img src="./static/images/pc/index/QR_CODE.jpg" height="110" width="110" alt="二维码">
                        </div>
                    </li>
                    <li><a href="" target="_blank">登录</a></li>
                    <li>|</li>
                    <li><a href="" target="_blank">注册</a></li>

                </ul>
            </div>
        </div>
    </div>
</div>
<!--header 结束-->

<!-- 私信（Modal） -->
<div class="modal fade" id="personalLetter"  aria-hidden="true">
    <button type="button" class="close zcbl-close" data-dismiss="modal" aria-hidden="true"></button>
    <div class="zcbl-modal-personalLetter">
        <div class="zcbl-modal-tit">
            <a href="javascript:;" onclick="showMsgList()">私信</a>
            <span class="msg-tit-user zcbl-hidden">名称名称名称</span>
            <span class="msg-zj zcbl-hidden">举报</span>
        </div>
        <div class="msgList">
            <ul>
                <li>
                    <div class="msgBox">
                        <div class="msgBox-l">
                            <a href=""><img src="./static/images/pc/personal/user.jpg" height="50" width="50" alt=""></a>
                        </div>
                        <div class="msgBox-r">
                            <a href="javascript:;" onclick="showMsgCon('用户名用户名111')"></a>
                            <div class="msgBox-rUinfo">
                                <p class="msgUser">用户名</p>
                                <p class="msgTime">18分钟前</p>
                                <div class="msgReportText" onclick="showMsgReport('用户名用户名')">
                                    <p class="report"></p>
                                </div>
                                <div class="clear"></div>
                                <p class="msgConVal">说话说话</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="msgBox">
                        <div class="msgBox-l">
                            <a href=""><img src="./static/images/pc/personal/user.jpg" height="50" width="50" alt=""></a>
                        </div>
                        <div class="msgBox-r">
                            <a href="javascript:;" onclick="showMsgCon('用户名用户名')"></a>
                            <div class="msgBox-rUinfo">
                                <p class="msgUser">用户名</p>
                                <p class="msgTime">18分钟前</p>
                                <div class="msgReportText" onclick="showMsgReport('用户名用户名')">
                                    <p class="report"></p>
                                </div>
                                <div class="clear"></div>
                                <p class="msgConVal">说话说话</p>
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="msgBox">
                        <div class="msgBox-l">
                            <a href=""><img src="./static/images/pc/personal/system.png" height="50" width="50" alt=""></a>
                        </div>
                        <div class="msgBox-r">
                            <a href="javascript:;" onclick="showMsgCon('系统消息')"></a>
                            <div class="msgBox-rUinfo">
                                <p class="msgUser">系统消息</p>
                                <p class="msgTime">两周前</p>
                                <div class="msgReportText" onclick="showMsgReport('系统消息')">
                                    <p class="report"></p>
                                </div>
                                <div class="clear"></div>
                                <p class="msgConVal">系统通知系统通知系统通知系统通知系统通知系统通知系统通知系统通知系统通知系统通知系统通知系统通知系统通知系统通知系统通知系统通知</p>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="msgCon zcbl-hidden">
            <div class="msgConBox">
                <div class="msgConTime">今天 <span>16:11</span></div>
                <div class="masConLeft">
                    <div class="masConLeft1">
                        <a href="#" target="_self"><img src="./static/images/pc/personal/user.jpg" height="50" width="50" alt=""></a>
                    </div>
                    <div class="masConLeft2">
                        吃了吗
                    </div>
                </div>
                <div class="clear"></div>
                <div class="masConRight">
                    <div class="masConRight1">
                        <a href="#" target="_self"><img src="./static/images/pc/personal/user.jpg" height="50" width="50" alt=""></a>
                    </div>
                    <div class="masConRight2">
                        没吃回家吃去吧没吃回家吃去吧没吃回家吃去
                    </div>
                </div>
                <div class="clear"></div>
                <div class="masConLeft">
                    <div class="masConLeft1">
                        <a href="#" target="_self"><img src="./static/images/pc/personal/user.jpg" height="50" width="50" alt=""></a>
                    </div>
                    <div class="masConLeft2">
                        吃了吗
                    </div>
                </div>
                <div class="clear"></div>
                <div class="masConRight">
                    <div class="masConRight1">
                        <a href="#" target="_self"><img src="./static/images/pc/personal/user.jpg" height="50" width="50" alt=""></a>
                    </div>
                    <div class="masConRight2">
                        没吃回家吃去吧没吃回家吃去吧没吃回家吃去
                    </div>
                </div>
                <div class="clear"></div>
                <div class="masConLeft">
                    <div class="masConLeft1">
                        <a href="#" target="_self"><img src="./static/images/pc/personal/user.jpg" height="50" width="50" alt=""></a>
                    </div>
                    <div class="masConLeft2">
                        吃了吗
                    </div>
                </div>
                <div class="clear"></div>
                <div class="masConRight">
                    <div class="masConRight1">
                        <a href="#" target="_self"><img src="./static/images/pc/personal/user.jpg" height="50" width="50" alt=""></a>
                    </div>
                    <div class="masConRight2">
                        没吃回家吃去吧没吃回家吃去吧没吃回家吃去
                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <form action="" class="zcbl-form-horizontal">
                <div class="msgConEdit form-group">
                    <textarea  name="form-control" id="" cols="30" rows="10" class="zcbl-form-control msgConEditText"></textarea>
                    <button class="btn-yellow-50 right">发私信</button>
                </div>
            </form>
        </div>
        <div class="msgReport zcbl-hidden">
            <p class="msgReportTit">举报原因:</p>
            <ul class="msgReportUl" id="msgReportUl">
                <li><input type="radio" name="report"/><span>垃圾广告</span></li>
                <li><input type="radio" name="report"/><span>淫秽色情</span></li>
                <li><input type="radio" name="report"/><span>虚假中奖</span></li>
                <li><input type="radio" name="report"/><span>敏感信息</span></li>
                <li><input type="radio" name="report"/><span>人身攻击</span></li>
                <li><input type="radio" name="report"/><span>骚扰他人</span></li>
            </ul>
            <div class="clear"></div>
            <button class="btn-yellow-50 msgReportBtn">提交</button>
        </div>
    </div>
</div>
<!-- 私信（Modal） -->

<script src="static/ickeckSkins/icheck.js"></script>
<link rel="stylesheet" href="./static/ickeckSkins/minimal/grey.css" />
<script>
    function showMsgCon(uName){
        if(uName){
            $('.msg-tit-user').html(uName);
            $('.msg-tit-user').show();
        }
        $('.msgList').hide();
        $('.msgReport').hide();
        $('.msgCon').show();
    }

    function showMsgList(){
        $('.msgList').show();
        $('.msgCon,.msg-tit-user,.msg-zj').hide();
    }

    function showMsgReport(uName){
        if(uName){
            $('.msg-tit-user').html(uName);
            $('.msg-tit-user').show();
            $('.msg-zj').show();
        }
        $('.msgList').hide();
        $('.msgReport').show();
    }

    //搜索radio按钮样式
    $(document).ready(function(){
        $('#msgReportUl input').iCheck({
            radioClass: 'iradio-grey-16',
            increaseArea: '30%' // optional
        });
    });
</script>


